/*
* @Author: Srain
* @Date:   2018-07-19 21:38:25
* @Last Modified by:   Srain 
* @Last Modified time: 2018-07-25 10:55:44
*/


//获取元素
var getElem = function(selector){
	return document.querySelector(selector);
}
//获取所有元素
var getAllElem = function(selector){
	return document.querySelectorAll(selector);
}

//获取元素样式
var getCls = function(element){
	return element.getAttribute('class');
}
//设置元素样式
var setCls = function(element ,cls){
	return element.setAttribute('class' ,cls);
}

//为元素添加样式
var addCls = function(element , cls){
	var baseCls = getCls(element);  //获取样式
	   //如果当前元素没有这个样式
	   if (baseCls.indexOf(cls) === -1) {
    	//给element设置样式
    	setCls(element,baseCls+' '+cls);
    }
}
//为元素删除样式
var delCls = function(element , cls){
	var baseCls = getCls(element);  //获取样式
	   //如果当前元素有这个样式
	   if (baseCls.indexOf(cls) != -1) {
    	//给element设置样式
    	setCls(element,baseCls.split(cls).join(' ').replace(/\s+/g,' '));
    }
}

//1.初始化样式 init

var screemAnimateElements = {
	//定义当前屏下有动画的元素
	'.screem-1':[
	],
	'.screem-2':[
	],
	'.screem-3':[
	'.screem-3_type',
	'.screem-3_type_item_i_1',
	'.screem-3_type_item_i_2',
	'.screem-3_type_item_i_3',
	'.screem-3_type_item_i_4'
	],
	'.screem-4':[
	]
};

//把某个屏幕中所有有动画的元素都设为init
var  setScreemAnimateInit = function(screemCls){
	var screem = document.querySelector(screemCls); //获取当前屏的元素
    var animateElements = screemAnimateElements[screemCls]; //需要设置动画的元素

	//初始化样式
	for(var i=0;i<animateElements.length;i++){
            	var element = document.querySelector(animateElements[i]); //如果没有，首先拿到这个元素
            	var baseCls = element.getAttribute('class');  //拿到这个元素的class

            	element.setAttribute('class',baseCls+''+animateElements[i].substr(1)+'_animate_init'); //初始化拿到的class
            }
        }


//设置播放屏内的元素动画
var playScreenAnimateDone = function(screemCls){
	var screem = document.querySelector(screemCls); //获取当前屏的元素
    var animateElements = screemAnimateElements[screemCls]; //需要设置动画的元素

	for(var i=0;i<animateElements.length;i++){
            	var element = document.querySelector(animateElements[i]); //如果没有，首先拿到这个元素
            	var baseCls = element.getAttribute('class');  //拿到这个元素的class

            	element.setAttribute('class',baseCls.replace('_animate_init','_animate_done')); //将_animate_init 替换成_animate_done
            }
        }

//2.页面滚动到哪个屏幕，哪个屏幕播放动画&导航条、大纲的出现
var navItems = getAllElem('.header_nav-item');
var outlineItems = getAllElem('.outline_item');

var switchNavItemsActive = function(idx){
	for(var i=0;i<navItems.length;i++){
		delCls(navItems[i],'header_nav-item_status_active');
	}
	addCls(navItems[idx],'header_nav-item_status_active')

	for(var i=0;i<outlineItems.length;i++){
		delCls(outlineItems[i],'outline_item_status_active');
	}
	addCls(outlineItems[idx],'outline_item_status_active')
}

window.onscroll = function(){
	var top = document.documentElement.scrollTop;

    if (top >80) {
    	addCls(getElem('.header'),'header_status_black');
    	addCls(getElem('.outline'),'outline_status_in');
    }else{
    	delCls(getElem('.header'),'header_status_black');
    	delCls(getElem('.outline'),'outline_status_in');

    	switchNavItemsActive(0);
    }
    if(top >1){
		playScreenAnimateDone('.screem-1');
		switchNavItemsActive(0);
	}
	  if(top >500){
		playScreenAnimateDone('.screem-2');
		switchNavItemsActive(1);
	}
	if(top >1000){
		playScreenAnimateDone('.screem-3');
		switchNavItemsActive(2);
	}
	if(top >1600){
		playScreenAnimateDone('.screem-4');
		switchNavItemsActive(3);
	}
}

//3.双向定位
var setNavJump = function(i ,lib){
	var  item = lib[i];
	item.onclick = function(){
		document.documentElement.scrollTop = i*650;
	}
}

for(var i=0;i<navItems.length;i++){
	setNavJump(i,navItems);
}
for(var i=0;i<outlineItems.length;i++){
	setNavJump(i,outlineItems);
}


setTimeout(function(){
	playScreenAnimateDone('.screem-1');
},200);


